<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Jquery mobile</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css">

<!-- Extra Codiqa features -->
<link rel="stylesheet" href="css/base.css">

<!-- jQuery and jQuery Mobile -->
<script src="js/libs/jquery-2.0.3.min.js"></script>
<script src="js/extend.js"></script>
<script src="js/base.js"></script>
<script src="js/libs/jquery.mobile-1.3.1.min.js"></script>

<!-- extend -->
<script>
var extraJS = [];
</script>
</head>

<body>
 
<!-- Start of second page -->
<div data-role="page" id="bar">
	<div data-role="header"  data-position="fixed"  data-transition="flip">
		<h1>test</h1>
	</div>
	<!-- /header -->
	
	<div role="main" class="ui-content">
		<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
		<p><a href="#foo">Back to foo</a></p>
	</div>
	<!-- /content -->
	
	<div data-role="footer"  data-position="fixed">
		<h4>Page Footer</h4>
	</div>
	<!-- /footer --> 
</div>
<!-- /page -->
</body>
</html>
